<template>
  <div>
    <h3>待审核的医疗报销申请</h3>

    <el-table :data="pendingReimbursements" style="width: 100%">
      <el-table-column prop="medicalserviceid" label="医疗服务ID" width="150"></el-table-column>
      <el-table-column prop="reimbursementdate" label="申请日期" width="180"></el-table-column>
      <el-table-column prop="totalcost" label="总费用" width="120"></el-table-column>
      <el-table-column prop="personalexpense" label="个人费用" width="120"></el-table-column>
      <el-table-column prop="reimbursementstatus" label="状态" width="100"></el-table-column>
      <el-table-column label="操作" width="150">
        <template v-slot="scope">
          <el-button v-if="scope.row.reimbursementstatus == 0" @click="toggleDetails(scope.row)" type="danger">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 展示具体信息区域 -->
    <el-card v-if="selectedReimbursement" class="box-card" style="margin-top: 20px;">
      <div class="clearfix">
        <span>申请ID: {{ selectedReimbursement.medicalserviceid }} - 详细信息</span>
      </div>
      <div>
        <p><strong>医疗服务ID:</strong> {{ selectedReimbursement.medicalserviceid }}</p>
        <p><strong>申请日期:</strong> {{ selectedReimbursement.reimbursementdate }}</p>
        <p><strong>总费用:</strong> {{ selectedReimbursement.totalcost }}</p>
        <p><strong>个人费用:</strong> {{ selectedReimbursement.personalexpense }}</p>
        <p><strong>当前状态:</strong> {{ selectedReimbursement.reimbursementstatus }}</p>
        <div style="margin-top: 20px;">
          <el-button @click="update(1)" type="success" style="margin-right: 10px;">审核通过</el-button>
          <!-- <el-button @click="update(0)" type="warning">审核不通过</el-button> -->
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '', // 搜索关键词
      pendingReimbursements: [],   // 所有未审核的报销记录
      selectedReimbursement: null  // 当前展开的报销记录
    };
  },
  mounted() {
    this.fetchPendingReimbursements();
  },
  methods: {
    fetchInsuredPersons() {

    },

    fetchPendingReimbursements() {
      axios.get('http://localhost:8081/reimbursementRecord/all')  // 请求后端获取未审核的报销记录
          .then(response => {
            this.pendingReimbursements = response.data;
          })
          .catch(error => {
            console.error('Error fetching pending reimbursements:', error);
          });
    },
    toggleDetails(data) {
      // 切换选择的报销记录详细信息
      this.selectedReimbursement = data
    },
    update(type) {
      axios.put(`http://localhost:8081/reimbursementRecord/update`, Object.assign(this.selectedReimbursement, { reimbursementstatus: type }))
            .then(() => {
              this.fetchPendingReimbursements();
              this.selectedReimbursement = null
            })
            .catch(error => {
              console.error("Error updating insured person:", error);
            });
    }
    // approveReimbursement(id) {
    //   axios.post(`/reimbursementRecord/approve/${id}`)  // 向后端发送审核通过请求
    //       .then(response => {
    //         this.selectedReimbursement.reimbursementstatus = "审核通过";
    //         this.fetchPendingReimbursements();  // 审核后刷新数据
    //       })
    //       .catch(error => {
    //         console.error('Error approving reimbursement:', error);
    //       });
    // },
    // rejectReimbursement(id) {
    //   axios.post(`/reimbursementRecord/reject/${id}`, {
    //     reason: "审核未通过，请重新提交"
    //   })  // 向后端发送审核不通过请求
    //       .then(response => {
    //         this.selectedReimbursement.reimbursementstatus = "审核未通过，请重新提交";
    //         this.fetchPendingReimbursements();  // 审核后刷新数据
    //       })
    //       .catch(error => {
    //         console.error('Error rejecting reimbursement:', error);
    //       });
    // }
  }
};
</script>
